<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文档片段类型</title>
</head>
<body>
</body>
<script>
  /** 1.在所有节点类型中，DocumentFragment 类型是唯一一个在标记中没有对应表示的类型。DOM 将文档片段定义为“轻量级”文档，能够包含和操
   *    作节点，却没有完整文档那样额外的消耗。DocumentFragment 节点具有以下特征：
   *    + nodeType 等于 11；
   *    + nodeName 值为"#document-fragment"；
   *    + nodeValue 值为 null；
   *    + parentNode 值为 null；
   *    + 子节点可以是 Element、ProcessingInstruction、Comment、Text、CDATASection 或EntityReference;
   *  2.不能直接把文档片段添加到文档。相反，文档片段的作用是充当其他要被添加到文档的节点的仓库。可以使用 
   *    document.createDocumentFragment()方法创建文档片段。
   *  3.文档片段从 Node 类型继承了所有文档类型具备的可以执行 DOM 操作的方法。
   *  4.如果文档中的一个节点被添加到一个文档片段，则该节点会从文档树中移除，不会再被浏览器渲染。
   *  5.添加到文档片段的新节点同样不属于文档树，不会被浏览器渲染。可以通过 appendChild()或 insertBefore()方法将文档片段的内容添加
   *    到文档。在把文档片段作为参数传给这些方法时，这个文档片段的所有子节点会被添加到文档中相应的位置。文档片段本身永远不会被添加到文档
   *    树。
   *  6.同时给浏览器添加多个DOM,浏览器就要重新渲染多次页面，以反映新添加的内容。为避免多次渲染，可以采用文档片段类型形式添加。
   *  
   * **/
   function checkDocumentFrame(){
     //1.创建文档片段实例
      let frameInstance = document.createDocumentFragment();
      let ulDom = document.createElement('ul');
     //2.将新建得元素添加到frameInstance实例中
      for(let i = 0;i<=10;i++){
        let liDom = document.createElement('li');
        liDom.appendChild(document.createTextNode(`Item ${i}`));
        frameInstance.appendChild(liDom)
      }
      document.body.appendChild(frameInstance);
   }
   checkDocumentFrame();
</script>
</html>
